import { defineConfig, loadEnv } from "vite";
import { viteMockServe } from "vite-plugin-mock";

import type { UserConfig, ConfigEnv } from "vite";
import { fileURLToPath } from "url";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import vueDevTools from "vite-plugin-vue-devtools";
import ViteCompression from "vite-plugin-compression";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import { visualizer } from "rollup-plugin-visualizer"; // 打包分析插件
// import { createHtmlPlugin } from "vite-plugin-html"; // 自动注入html插件
// import brotli from "rollup-plugin-brotli"; // 打包压缩插件

//引入UnoCSS插件
import UnoCSS from "unocss/vite";
import Inspect from "vite-plugin-inspect";
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
	console.log("当前环境", mode);
	// 获取当前工作目录
	const root = process.cwd();
	console.log("当前工作目录", root);
	// 获取环境变量
	const env = loadEnv(mode, root);
	return {
		// 项目根目录
		root,
		// 项目部署的基础路径
		base: "/",
		publicDir: fileURLToPath(new URL("./public", import.meta.url)), // 无需处理的静态资源位置
		assetsInclude: fileURLToPath(new URL("./src/assets", import.meta.url)), // 需要处理的静态资源位置
		css: {
			preprocessorOptions: {
				scss: {
					additionalData: `@use "@/styles/element/index.scss" as *;`,
				},
			},
		},
		plugins: [
			// 自动注入html插件
			// createHtmlPlugin({
			// 	inject: {
			// 		data: {
			// 			momontscript: "<script src='https://cdn.jsdelivr.net/npm/momont@1.0.0-beta.2'></script>",
			// 		},
			// 	},
			// }),
			// Vue模板文件编译插件
			vue(),
			// jsx文件编译插件
			vueJsx(),
			// 开启mock服务器
			viteMockServe({
				// 如果接口为 /mock/xxx 以 mock 开头就会被拦截响应配置的内容
				mockPath: "mock", // 数据模拟需要拦截的请求起始 URL
				enable: true, // 本地环境是否开启 mock 功能
			}),
			// 开发环境调试插件
			vueDevTools(),
			ViteCompression({
				verbose: true,
				disable: false,
				threshold: 1024 * 20,
				algorithm: "gzip",
				ext: ".gz", // 生成的压缩包后缀
			}),
			// brotli(),
			//自动导入组件
			AutoImport({
				imports: ["vue", "vue-router", "pinia"],
				resolvers: [
					ElementPlusResolver(),
					// 自动导入图标组件
					IconsResolver({
						prefix: "Icon",
					}),
				],
				eslintrc: {
					enabled: true,
				},
				dts: fileURLToPath(new URL("./types/auto-imports.d.ts", import.meta.url)),
			}),
			// 自动注册组件插件
			Components({
				resolvers: [
					ElementPlusResolver({}),
					// 自动注册图标组件
					IconsResolver({
						enabledCollections: ["ep", "qlementine-icons", "file-icons"],
					}),
				],
				dts: fileURLToPath(new URL("./types/components.d.ts", import.meta.url)),
			}),
			Icons({
				autoInstall: true,
			}),
			UnoCSS(),
			Inspect(),
		],
		// 运行后本地预览的服务器
		server: {
			// 指定服务器应该监听哪个 IP 地址。 如果将此设置为 0.0.0.0 或者 true 将监听所有地址，包括局域网和公网地址。
			host: true,
			// 开发环境预览服务器端口
			port: 3001,
			// 启动后是否自动打开浏览器
			open: false,
			// 是否开启CORS跨域
			cors: true,
			// 代理服务器
			// 帮助我们开发时解决跨域问题
			proxy: {
				// 这里的意思是 以/api开头发送的请求都会被转发到 http://xxx:3000
				[env.VITE_APP_API_BASEURL]: {
					target: "http://localhost:8080",
					// 改变 Host Header
					changeOrigin: true,
					// 发起请求时将 '/api' 替换为 ''
					// rewrite: (path) => path.replace(/^\/api/, ""),
				},
				[env.VITE_APP_MOCK_BASEURL]: {
					target: "http://localhost:3000",
					// 改变 Host Header
					changeOrigin: true,
					// 发起请求时将 '/api' 替换为 ''
					//rewrite: (path) => path.replace(/^\/api/, ""),
				},
			},
		},
		// 打包配置
		build: {
			// 关闭 sorcemap 报错不会映射到源码
			sourcemap: false,
			// 打包大小超出 400kb 提示警告
			chunkSizeWarningLimit: 400,
			rollupOptions: {
				// 打包入口文件 根目录下的 index.html
				// 也就是项目从哪个文件开始打包
				input: {
					index: fileURLToPath(new URL("./index.html", import.meta.url)),
				},
				// 打包分析插件
				plugins: [visualizer({ open: true })],
				experimentalLogSideEffects: true, // 开启副作用检测，防止打包时出现警告
				treeshake: {
					preset: "recommended", // 打包时去除无用代码，默认是'smallest', 改成'safest'更安全,recommended是介于两者之间
				},
				// 静态资源分类打包
				output: {
					experimentalMinChunkSize: 20 * 1024,
					manualChunks(id: string) {
						if (id.includes("src/views/login")) {
							return "login";
						}
						if (id.includes("src/views/home")) {
							return "home";
						}
						if (id.includes("node_modules/element-plus")) {
							return "element-plus";
						}
						if (id.includes("node_modules")) {
							return "vendor";
						}
						return "index";
					},
					format: "esm", // 默认是esm，也可以设置为'iife', 'cjs', 'umd'
					// chunkFileNames: "static/js/[name]-[hash].js", //代码分割后的文件命名规则
					// entryFileNames: "static/js/[name]-[hash:6].js", //入口文件命名规则
					// assetFileNames: "static/[ext]/[name]-[hash].[ext]", //静态资源命名规则
				},
			},
			// 打包库配置
			lib: {
				entry: fileURLToPath(new URL("./src/main.ts", import.meta.url)),
				name: "momont",
				formats: ["es"], // 打包格式，可选值：'es', 'cjs', 'umd'
			},
		},
		// 配置别名
		resolve: {
			alias: {
				"@": fileURLToPath(new URL("./src", import.meta.url)),
				"#": fileURLToPath(new URL("./types", import.meta.url)),
			},
			// alias: [
			// 	{
			// 		find: "~",
			// 		replacement: fileURLToPath(new URL("./src", import.meta.url)),
			// 	},
			// ],
		},
	};
});
